<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>生鲜商城</title>
    <!-- 引入样式 -->
    <link
            rel="stylesheet"
            href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="js/jquery.js"></script>
</head>
<body>
<el-container id="app">
    <!--头部导航 -->
    <el-header style="height:510px">
        <el-menu
                :default-active="activeIndex"
                class="el-menu-demo"
                mode="horizontal"
                @select="handleSelect"
        >
            <div class="demo-image">
                <div class="block" :key="img.headbg">
                    <el-image
                            style="width: 1920px; height: 440px"
                            :src="img.headbg"
                            :fit="img.headbg">
                    </el-image>
                </div>
            </div>
            <el-menu-item index="0">首页</el-menu-item>
            <el-menu-item index="1">用户</el-menu-item>
            <el-menu-item index="2">商品</el-menu-item>
            <el-menu-item index="3">优惠券</el-menu-item>
            <el-menu-item index="4">秒杀</el-menu-item>
            <el-menu-item index="5">数据统计</el-menu-item>
            <el-menu-item index="6">登出</el-menu-item>
        </el-menu>
        <div class="line"></div>
    </el-header>
    <!-- 主体部分 请在下方写代码 -->
    <el-main>
        <template>
            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                <el-tab-pane label="商品批次操作记录" name="1">
                    <template>
                        <el-table :data="productBatchOperation" border style="width: 1450px">
                            <el-table-column
                                    prop="productId"
                                    label="商品id"
                                    width="100">
                            </el-table-column>
                            <el-table-column
                                    prop="productBatchId"
                                    label="批次id"
                                    width="100">
                            </el-table-column>
                            <el-table-column
                                    prop="productBatchOperationId"
                                    label="批次操作id"
                                    width="100">
                            </el-table-column>
                            <el-table-column
                                    prop="productBatchOperationStatus"
                                    label="操作行为"
                                    width="100">
                            </el-table-column>
                            <el-table-column
                                    prop="productBatchOperationTime"
                                    label="操作时间(倒序排序)"
                                    width="200">
                            </el-table-column>
                        </el-table>
                    </template>
                    <div class="block">
                        <el-pagination
                                @current-change="selectPBO"
                                layout="prev, pager, next"
                                :total="50">
                        </el-pagination>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="交易记录" name="2">
<!--                    -->
                    <template>
                        <el-table :data="transaction" border style="width: 1450px">
                            <el-table-column
                                    prop="transactionId"
                                    label="交易id"
                                    width="100">
                            </el-table-column>
                            <el-table-column
                                    prop="userId"
                                    label="用户id"
                                    width="100">
                            </el-table-column>
                            <el-table-column
                                    prop="ordersId"
                                    label="订单id"
                                    width="100">
                            </el-table-column>
                            <el-table-column
                                    prop="transactionStatus"
                                    label="操作行为"
                                    width="100">
                            </el-table-column>
                            <el-table-column
                                    prop="transactionTime"
                                    label="操作时间"
                                    width="200">
                            </el-table-column>
                        </el-table>
                    </template>
                    <div class="block">
                        <el-pagination
                                @current-change="selectT"
                                layout="prev, pager, next"
                                :total="50">
                        </el-pagination>
                    </div>
<!--                    -->
                </el-tab-pane>
<!--                <el-tab-pane label="角色管理" name="3">角色管理</el-tab-pane>-->
<!--                <el-tab-pane label="定时任务补偿" name="4">定时任务补偿</el-tab-pane>-->
            </el-tabs>
        </template>

    </el-main>
</el-container>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            //此处请改为对应的选项
            activeIndex: "5",
            img: {
                headbg: '/img/bg/banner3back.jpg',
            },
            activeName: '',
            productBatchOperation: [],
            PBOPageIndex: '1',
            transaction:[],
            TPageIndex:'1',
        },
        methods: {
            handleClick(tab, event) {
                console.log(this.activeName)
                if (this.activeName == 1) {
                    this.selectPBO(1)
                }else if(this.activeName==2){
                    this.selectT(1)
                }
            },
            selectT:function(pg){
                var vm = this;
                $.ajax({
                    url: 'http://localhost:8080/freshmarket/transaction/selectTransaction',
                    data: "pageIndex=" + pg,
                    dataType: "json",
                    type: "post",
                    success: function (data) {
                        if (data.success == true) {
                            vm.transaction = data.data;
                        } else {
                            alert(data.message)
                        }
                    }
                })
            },
            selectPBO: function (pg) {
                var vm = this;
                $.ajax({
                    url: '/freshmarket/product-batch-operation/selectList',
                    data: "pageIndex=" + pg,
                    dataType: "json",
                    type: "post",
                    success: function (data) {
                        if (data.success == true) {
                            vm.productBatchOperation = data.data;
                        } else {
                            alert(data.message)
                        }
                    }
                })
            },
            //导航 添加中
            handleSelect: function (key, keyPath) {
                console.log(key, keyPath);
                if (key == 0) {
                    window.location.href = "/index"
                } else if (key == 1) {
                    window.location.href = "/user"
                } else if (key == 2) {
                    window.location.href = "/product"
                } else if (key == 3) {
                    window.location.href = "/coupon"
                } else if (key == 4) {
                    window.location.href = "/limited"
                } else if (key == 5) {
                    window.location.href = "/statistics"
                } else if (key == 6) {
                    $.ajax({
                        url: "/logout",
                    })
                }
            },
        },
        //生命周期初始化
        mounted: function () {
        },
    });
</script>
</body>
</html>
